<!--
 数字滚动组件
 @Author: mosowe
 @Date:2023-05-04 09:03:13
-->
<template>
  <view
    class="mosowe-number-run"
    :style="{
      '--number-run-size': size + 'px',
      '--number-run-leep': (leep / 1000).toFixed(2) + 's'
    }">
    <view
      class="number-wrap"
      v-for="(item, index) in numList"
      :key="index">
      <view
        class="number-scroll"
        v-if="item !== '.'"
        :style="
          isRun
            ? {
                transform: 'translateY(-' + (Number(size) + 6) * item + 'px)'
              }
            : {}
        ">
        <view
          class="number-item"
          v-for="n in 10"
          :key="n">
          {{ n - 1 }}
        </view>
      </view>
      <text
        class="number-dot"
        v-else>
        .
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'mosowe-number-run',
  props: {
    number: {
      // 数字，最长7位小数
      type: Number,
      default: 0,
      required: true
    },
    size: {
      // 字体大小，单位px，行高在此基础上加6px，默认30px
      type: [String, Number],
      default: '10'
    },
    delay: {
      // 延时，毫秒，默认100ms
      type: Number,
      default: 100
    },
    leep: {
      // 速度 毫秒，默认500ms
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      numList: [],
      isRun: false
    };
  },
  watch: {
    number: {
      handler() {
        this.numList = this.number.toString().split('');
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      let t = setTimeout(() => {
        clearTimeout(t);
        t = null;
        this.isRun = true;
      }, this.delay);
    });
  }
};
</script>

<style scoped lang="scss">
.mosowe-number-run {
  display: inline-block;
  overflow: hidden;
  .number-wrap {
    display: inline-block;
    vertical-align: middle;
    font-size: var(--number-run-size);
    line-height: calc(var(--number-run-size) + 6px);
    height: calc(var(--number-run-size) + 6px);
    overflow: hidden;
    .number-scroll {
      transition: all ease-in-out var(--number-run-leep);
    }
  }
}
</style>
